<template>
  <div class="empty-wrap" :class="center?'center':'start'" :style="{paddingLeft: pl + 'px'}">
    <img src="@/assets/img/empty_tip/empty.png" alt="">
    <p>
      <slot>暂无数据</slot>
    </p>
  </div>
</template>

<script>
export default {
  name: 'emptyTip',
  props: {
    center: {
      required: false,
      type: Boolean,
      default: () => false
    },
    pl: {
      required: false,
      type: Number,
      default: () => 60
    }
  }
};
</script>

<style scoped lang="less">
  .empty-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 150px;
  }

  .center {
    align-items: center;
  }

  .start {
    align-items: flex-start;
  }

  img {
    width: 105px;
    height: 68px;
    object-fit: cover;
  }

  p {
    font-size: 20px;
    color: #142333;
  }
</style>
